<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web 视频优化器 - 浏览器端视频 faststart 优化工具</title>

    <!-- SEO Meta Tags -->
    <meta name="description" content="基于 WebAssembly 的浏览器端视频优化工具，为视频添加 faststart 标志，优化流媒体播放体验。无需安装，隐私安全，即开即用。">
    <meta name="keywords" content="视频优化,faststart,WebAssembly,FFmpeg,浏览器,在线工具,视频处理">
    <meta name="author" content="Web Video Optimizer Team">

    <!-- PWA Meta Tags -->
    <meta name="theme-color" content="#667eea">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <meta name="apple-mobile-web-app-title" content="视频优化器">

    <!-- Preload Critical Resources -->
    <link rel="preload" href="https://unpkg.com/@ffmpeg/ffmpeg@0.10.1/dist/ffmpeg.min.js" as="script">
    <link rel="preconnect" href="https://unpkg.com">
    <link rel="dns-prefetch" href="//unpkg.com">

    <!-- Styles -->
    <link rel="stylesheet" href="./css/styles.css">
</head>

<body>
    <!-- 主容器 -->
    <div id="video-optimizer" class="container">
        <!-- 页面头部 -->
        <header>
            <h1>🎬 Web 视频优化器</h1>
            <p>在浏览器中直接为视频添加 faststart 标志，优化流媒体播放体验</p>

            <!-- 特性展示 -->
            <div class="features">
                <div class="feature">
                    <span class="feature-icon">🌐</span>
                    <span>纯浏览器运行</span>
                </div>
                <div class="feature">
                    <span class="feature-icon">🔒</span>
                    <span>隐私安全</span>
                </div>
                <div class="feature">
                    <span class="feature-icon">⚡</span>
                    <span>高性能处理</span>
                </div>
                <div class="feature">
                    <span class="feature-icon">📱</span>
                    <span>响应式设计</span>
                </div>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main>
            <!-- 状态显示 -->
            <div class="status" id="status">
                <strong>状态:</strong> <span id="statusText">正在初始化...</span>
                <div id="memoryInfo" style="font-size: 0.8em; color: #666; margin-top: 5px;"></div>
            </div>

            <!-- 文件上传区域 -->
            <section class="upload-section">
                <div class="upload-zone" id="dropZone" tabindex="0" role="button" aria-label="选择或拖拽视频文件">
                    <div class="upload-icon" aria-hidden="true">📁</div>
                    <div class="upload-content">
                        <p>拖拽视频文件到这里，或点击选择文件</p>
                        <p class="upload-hint">支持 MP4、MOV、AVI、MKV、WebM 等格式，最大 10GB<br>
                        <small>使用Chrome现代API优化大文件处理，支持超大文件流式处理</small></p>
                        <input type="file" id="fileInput" accept="video/*" style="display: none;" aria-label="选择视频文件">
                        <button class="select-btn" id="selectBtn" disabled>
                            选择视频文件
                        </button>
                    </div>
                </div>
            </section>

            <!-- 文件信息显示 -->
            <section class="file-info" id="fileInfo" style="display: none;">
                <h3>文件信息</h3>
                <p><strong>文件名:</strong> <span id="fileName"></span></p>
                <p><strong>文件大小:</strong> <span id="fileSize"></span></p>
                <p><strong>文件类型:</strong> <span id="fileType"></span></p>
            </section>

            <!-- 进度显示 -->
            <section class="progress-container" id="processSection" style="display: none;">
                <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
                <div class="progress-text" id="progressText" aria-live="polite">准备中...</div>
            </section>

            <!-- 日志输出 -->
            <section class="log-container">
                <h4>处理日志</h4>
                <div class="log-output" id="logOutput" role="log" aria-live="polite"></div>
            </section>

            <!-- 处理结果 -->
            <section class="result-section" id="resultSection" style="display: none;">
                <h3>✅ 处理完成</h3>
                <div class="result-actions">
                    <button class="download-btn" id="downloadBtn">
                        📥 下载优化后的视频
                    </button>
                    <button class="reset-btn" onclick="resetApp()">
                        🔄 处理新文件
                    </button>
                </div>
            </section>

            <!-- 错误显示 -->
            <section class="error-section" id="errorSection" style="display: none;" role="alert">
                <h3>❌ 处理失败</h3>
                <div class="error-message" id="errorMessage"></div>
                <div class="result-actions">
                    <button class="reset-btn" onclick="resetApp()">🔄 重新开始</button>
                </div>
            </section>
        </main>

        <!-- 页面底部 -->
        <!-- <footer>
            <div class="footer-content">
                <div class="features">
                    <div class="feature">
                        <span class="feature-icon">🎯</span>
                        <span>专业功能</span>
                    </div>
                    <div class="feature">
                        <span class="feature-icon">🚀</span>
                        <span>即开即用</span>
                    </div>
                    <div class="feature">
                        <span class="feature-icon">🔧</span>
                        <span>开源免费</span>
                    </div>
                </div>
                
                <div class="footer-links">
                    <a href="https://github.com/your-username/web-video-optimizer" target="_blank" rel="noopener noreferrer">
                        GitHub
                    </a>
                    <a href="./使用指南.md" target="_blank">使用指南</a>
                </div>
                
                <div class="footer-info">
                    <p>&copy; 2024 Web Video Optimizer. MIT License.</p>
                </div>
            </div>
        </footer> -->
    </div>

    <!-- 脚本加载 -->
    <script>
        // 显示加载状态
        document.addEventListener('DOMContentLoaded', () => {
            const statusText = document.getElementById('statusText');
            if (statusText) {
                statusText.textContent = '正在加载 FFmpeg 库...';
            }
        });

        // 错误处理
        window.addEventListener('error', (event) => {
            console.error('全局错误:', event.error);
            const statusText = document.getElementById('statusText');
            if (statusText) {
                statusText.textContent = '加载失败，请刷新页面重试';
                statusText.style.color = '#dc3545';
            }
        });

        // 未处理的 Promise 拒绝
        window.addEventListener('unhandledrejection', (event) => {
            console.error('未处理的 Promise 拒绝:', event.reason);
        });
    </script>

    <!-- FFmpeg.wasm 库 -->
    <script src="https://unpkg.com/@ffmpeg/ffmpeg@0.10.1/dist/ffmpeg.min.js"
        onerror="console.error('FFmpeg 库加载失败')"></script>

    <!-- 应用主脚本 -->
    <script src="./app.js"></script>
</body>

</html>